<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			img {
				/* blur是一个函数，小括号里面数值越大越模糊，注意数值要加单位 */
				filter: blur(5px);
			}
			/* img:hover之间不能有空格，写的时候注意 */
			img:hover {
				filter: blur(0);
			}
			
			
			.father {
				width: 300px;
				height: 300px;
				background-color: hotpink;
			}
			.son {
				width: calc(100% - 30px);
				/* 注意:减号前后一定要给出空格，不然无效 */
				height: 200px;
				background-color: yellow;
			}
			
		</style>
	</head>
	<body>
		<h2>css3滤镜，图片模糊处理</h2>
		<h3>使用方法filter:函数名() 其中blur表示模糊</h3>
		
		<!-- filter中还有很多其他函数，可以mdn查阅 -->
		<img src="../images/logo.png" alt="">
		
		<h2>calc函数计算宽度</h2>
		<!-- width:calc(100% - 80px); -->
		<!-- 计算方法可以是加减乘除都行 -->
		<!-- 让子盒子的宽度始终比父盒子小30px -->
		<div class="father">
			<div class="son"></div>
		</div>
	</body>
</html>
